<template>
  <div class="container">
    <!-- 操作栏 -->
    <Header :showRefresh="false" @refresh="() => {}">
      <template #leftTitle>
        【{{dataInfo.applyTitle}}】
      </template>
    </Header>
    <div class="page-main">
      <div class="page-main-query all-search">
        <FilterBar :showBack="false" @route="goBack" />
      </div>
      <!-- 详情 -->
      <InfoArea :data="dataInfo" />
      <!-- 表格 -->
      <DynamicTable
        class="table-container"
        :showPagination="false"
        :data="dataInfo.apiList"
        :columns="tableColumns"
        @pagination="() => {}"
      />
      <footer v-if="dataInfo.status !== 4">
        <el-popconfirm
          confirm-button-text="确定"
          cancel-button-text="取消"
          :icon="InfoFilled"
          icon-color="red"
          title="你确定要取消本次的审批内容吗?"
          @confirm="goBack"
        >
          <template #reference>
            <el-button>取消</el-button>
          </template>
        </el-popconfirm>
        <el-button  type="primary" :loading="buttonLoading" @click="submit">提交</el-button>
      </footer>
    </div>

  </div>
</template>

<script lang="jsx">
import { ref, onMounted, defineComponent, reactive } from "vue";
import Header from "@/components/Header.vue";
import FilterBar from "@/components/FilterBar.vue";
import DynamicTable from "@/components/DynamicTable";

import InfoArea from "./components/Info.vue";
import { useListManage } from "@/hooks";
import { InfoFilled } from "@element-plus/icons-vue";
import { useRouter, useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
import {
  getDataSourcePageList,
  deleteDataSource,
  getDataSourceDetail,
} from "@/api/adaptation";
import {
  aprrove,
  getAprroveDetail
} from "@/api/cascade";
export default defineComponent({
  name: "MeansCascadeDetail",
  components: {
    InfoArea,
    Header,
    FilterBar,
    DynamicTable,
  },
  setup(props, { emit, slots }) {
    const router = useRouter()
    const route = useRoute()
    const goBack = () => {
      router.back()
    }

    const tableColumns = ref([
      {
        label: "服务名称",
        key: "apiName",
        minWidth: "250px",
      },
      {
        label: "所属应用",
        key: "apiApplicationName",
        minWidth: "200px",
      },
      {
        label: "地区",
        key: "apiRegionName",
        minWidth: "150px",
      },
      {
        label: "所属部门",
        key: "apiDeptName",
        minWidth: "200px",
      },
      {
        label: "审批结果",
        width: "200px",
        render: (h, {row, index}) => (
          <span>
            {
              <el-radio-group disabled={dataInfo.value.status === 4} v-model={row.status}>
              <el-radio label={4}>同意</el-radio>
              <el-radio label={5}>拒绝</el-radio>
            </el-radio-group>
            }
          </span>
        ),
      },
      {
        label: "审批意见",
        fixed: "right",
        width: "200px",
        render: (h, params) => (
          <span>
            {
              <el-input
                disabled={dataInfo.value.status === 4}
                v-model={params.row.auditText}
                type="textarea"
              />
            }
          </span>
        ),
      },
    ]);

    const buttonLoading = ref(false)

    const submit = async() => {
      const { id, apiList } = dataInfo.value
      let approveResult = true
      apiList.map(item => {
        if(item.status !== 4 && item.status !== 5) {
          approveResult = false
        }
      })
      if(approveResult) {
        buttonLoading.value = true
        const res = await aprrove(id, apiList)
        buttonLoading.value = false
        if(res.status === 200) {
          goBack()
        }
      } else {
        ElMessage.warning('请对所有服务进行逐一审批')
      }
      
    }
    const dataInfo = ref({})
    const getInfo = async() => {
      const res = await getAprroveDetail(route.params.id)
      dataInfo.value = res.data
    }
    onMounted(() => {
      getInfo();
    });

    return {
      InfoFilled,
      dataInfo,
      buttonLoading,
      tableColumns,
      goBack,
      submit
    };
  },
});
</script>
<style lang="scss" scoped>
.table-container {
  height: calc(100% - 270px);
}
footer {
  text-align: right;
  margin-top: 20px;
}
</style>